<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">我的收藏</el-menu-item>
    </el-menu>
    <br> <br>

    <div style="width: 100%" v-if="!isCollect">

      <div class="col-sm-6 col-md-4">
        <div class="thumbnail row" v-for="testDetail in testVos">
          <img :src="testDetail.testPictureUrl" alt="..." class="col-sm-6 col-md-6"
               style="width: 140px;height: 130px">
          <div class="caption text-left">
            <p>靶场名称:<span v-text="testDetail.testName">n</span></p>
            <p>靶场简介:<span v-text="testDetail.simpleNote">name</span></p>
            <p>难度等级:<span v-text="testDetail.difficulty">name</span></p>
            <el-row>
              <el-button type="danger" size="small" @click="unCollect(testDetail.testCode)" plain>取消收藏</el-button>

            </el-row>
          </div>

        </div>

      </div>
    </div>
    <div v-if="isCollect"><el-empty description="暂无收藏"></el-empty></div>
    <el-pagination id="page"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-size="size"
                   layout="total, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>


  </div>
</template>

<script>


export default {
  name: "myCollect",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      input: "",
      currentPage: 1,
      size: 4,
      total: 0,
      testVos: [],
      isCollect: false
    }
  },

  methods: {
    handleSelect(key, keyPath) {
    },
    initAllTestDetail() {
      let params = {
        currentPage: this.currentPage,
        size: this.size,
        input: this.input
      }
      this.$axios.postForm("/collectAndTest/getCollect", params)
          .then(response => {
            let responseData = response.data
            if (responseData.code == 200) {
              let pageData = responseData.data;
              this.testVos = pageData.pageVo
              this.currentPage = pageData.currentPage;
              this.size = pageData.size;
              this.total = pageData.total;
            } else {
              let pageData = responseData.data;
              this.testVos = []
              this.isCollect = true;
            }
          })
    },
    handleSizeChange(size) {
      this.size = size;
      this.currentPage = 1;
      this.initAllTestDetail();
    }
    ,
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initAllTestDetail();
    }
    ,
    unCollect(testCode) {
      this.$confirm('是否确定取消收藏?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.postForm("collectAndTest/collect", {testCode: testCode})
            .then(response => {
              let responseData = response.data
              if (responseData.code == 200) {
                this.$message({
                  type: 'success',
                  message: '取消成功!',
                  duration: 2000
                });
                this.initAllTestDetail()
              } else {
                this.$message({
                  type: 'error',
                  message: responseData.msg,
                  duration: 2000
                });
                this.initAllTestDetail()
              }
            })
      })
    }
  },
  mounted() {
    this.initAllTestDetail()
  }

}
</script>
<style scoped>
#page {
  position: absolute;
  top: 600px;
  left: 550px;
}

.row {
  float: left;
  width: 300px;
}
</style>